import { component$, Slot } from "@builder.io/qwik";
import { Link, useLocation } from '@builder.io/qwik-city';
import { LuLayoutDashboard, LuListPlus, LuSettings } from "@qwikest/icons/lucide";

export default component$(() => {
	const location = useLocation();
	const navigation = [
    { name: 'Dashboard', href: '/dashboard', icon: LuLayoutDashboard },
    { name: 'Subscriptions', href: '/subscriptions', icon: LuListPlus },
    { name: 'Settings', href: '/settings', icon: LuSettings },
  ];
  return (
		<div class="min-h-screen bg-gray-50">
      <div class="flex h-screen">
        <div class="hidden md:flex md:w-64 md:flex-col">
          <div class="flex flex-col flex-grow pt-5 overflow-y-auto bg-white border-r">
            <div class="flex items-center flex-shrink-0 px-4">
              <h1 class="text-xl font-bold">Resource Tracker</h1>
            </div>
            <div class="mt-8 flex-grow flex flex-col">
              <nav class="flex-1 px-2 space-y-1">
                {navigation.map((item) => {
                  const Icon = item.icon;
                  const isActive = location.url.pathname === item.href;
                  return (
                    <Link
                      key={item.name}
                      href={item.href}
                      class={`${
                        isActive
                          ? 'bg-gray-100 text-gray-900'
                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                      } group flex items-center px-2 py-2 text-sm font-medium rounded-md`}
                    >
                      <Icon
                        class={`${
                          isActive ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500'
                        } mr-3 h-5 w-5`}
                      />
                      {item.name}
                    </Link>
                  );
                })}
              </nav>
            </div>
          </div>
        </div>

        <div class="flex flex-col flex-1 overflow-hidden">
          <main class="flex-1 relative overflow-y-auto focus:outline-none">
            <div class="py-6">
              <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
								<Slot />
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
});
